<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>文章详情</title>
		<link rel="stylesheet" href="./static/css/bootstrap4.0.min.css" >
		<script src="./static/js/jquery.slim.min.js" ></script>
		<script src="./static/js/popper.min.js" ></script>
		<script src="./static/js/bootstrap4.0.min.js"></script>
		<script src="./static/js/axios.min.js"></script>
	</head>
	<body>
	<table class="table table-striped table-sm" id="articleTable">
    <tr class="table-active">
        <th width="15%">ID</th>
        <td id="articleId"></td>
    </tr>
    <tr class="table-secondary">
        <th>标题</th>
        <td id="articleTitle"></td>
    </tr>
    <tr class="table-success">
        <th>关键字</th>
        <td id="articleKeywords"></td>
    </tr>
    <tr class="table-danger">
        <th>简介</th>
        <td id="articleDesc"></td>
    </tr>
    <tr class="table-warning">
        <th>发表时间</th>
        <td id="articleTime"></td>
    </tr>
    <tr class="table-info">
        <th>点击量</th>
        <td id="articleClicks"></td>
    </tr>
    <tr class="table-light">
        <th>内容</th>
        <td id="articleContent"></td>
    </tr>
</table>

	<script>
    // 获取文章ID
    const urlParams = new URLSearchParams(window.location.search);
    const articleId = urlParams.get('id');

    // 从后台获取文章详情
    function getArticleDetail() {
        axios.get(`/getArticleById?id=${articleId}`)
            .then(response => {
                const article = response.data;
                document.getElementById('articleId').textContent = article.id;
                document.getElementById('articleTitle').textContent = article.title;
                document.getElementById('articleKeywords').textContent = article.keywords;
                document.getElementById('articleDesc').textContent = article.desci;
                document.getElementById('articleTime').textContent = article.localTime;
                document.getElementById('articleClicks').textContent = article.click;
                document.getElementById('articleContent').textContent = article.content;
            })
            .catch(error => {
                console.error('获取文章详情失败:', error);
                alert('获取文章详情失败，请稍后重试！');
            });
    }

    // 页面加载时执行
    document.addEventListener('DOMContentLoaded', () => {
        if (articleId) {
            getArticleDetail();
        } else {
            alert('文章ID缺失，请返回上一页重新选择！');
            history.back();
        }
    });
</script>
	</body>
</html>